<template>
  <div><headTop :headTitle="encodeURI('进口车展示')" :toHome="'true'"/>
    <div id="listCar" class="zcar_list">
      <section class="sort_container">
        <!-- 品牌分类 -->
        <div class="sort_item" :class="{choose_type:sortBy == 'brand'}" >
          <div class="sort_item_container" @click="chooseType('brand')">
            <div class="sort_item_border">
              <span :class="{category_title: sortBy == 'brand'}">{{brandTitle}}</span>
              <svg width="10" height="10" xmlns="http://www.w3.org/2000/svg" version="1.1" class="sort_icon">
                <polygon points="0,3 10,3 5,8"/>
              </svg>
            </div>
          </div>
          <transition name="showlist" v-show="brand">
           <section v-show="sortBy == 'brand'" class="category_container sort_detail_type">
              <section class="category_left">
                 <ul>
                   <li class="category_left_li"><span>不限品牌</span></li>
                   <li class="category_left_li"><section class="fast">快速选择</section>
                     <section class="fastSelect">
                       <ul>
                         <li>
                           <img src="../../images/brand2.jpg" class="category_icon">
                           <span>{{brand.name}}</span>
                         </li>
                         <li>
                           <img src="../../images/brand2.jpg" class="category_icon">
                           <span>{{brand.name}}</span>
                         </li>
                         <li>
                           <img src="../../images/brand2.jpg" class="category_icon">
                           <span>{{brand.name}}</span>
                         </li>
                         <li>
                           <img src="../../images/brand2.jpg" class="category_icon">
                           <span>{{brand.name}}</span>
                         </li>
                         <li>
                           <img src="../../images/brand2.jpg" class="category_icon">
                           <span>{{brand.name}}</span>
                         </li>
                         <li>
                           <img src="../../images/brand2.jpg" class="category_icon">
                           <span>{{brand.name}}</span>
                         </li>
                         <li>
                           <img src="../../images/brand2.jpg" class="category_icon">
                           <span>{{brand.name}}</span>
                         </li>
                         <li>
                           <img src="../../images/brand2.jpg" class="category_icon">
                           <span>{{brand.name}}</span>
                         </li>
                       </ul>
                     </section>
                   </li>
                   <li v-for="(item, index) in brands" :key="index" class="category_left_li">
                     <span class="type">{{item.type}}</span>
                     <section v-for="(brand,key) in item.brand" :key="key">
                       <img src="../../images/brand2.jpg" class="category_icon">
                       <span @click="selectCategoryName(brand.name,brand.child, index)">{{brand.name}}</span>
                     </section>
                   </li>
                 </ul>
               </section>
               <section class="category_right" v-show="closeOff">
                 <div class="off" @click="close()">点击收起</div>
                 <ul class="select">
                   <li class="category_right_li"><img src="../../images/brand2.jpg" class="category_icon"><span>{{subBrandTitle}}</span></li>
                   <li v-for="(item, index) in brandsDetail"  :key="index" class="category_right_li" @click="getCategoryIds(item.config,index,item.id)" >
                     <span>{{item.config}}</span>
                   </li>
                 </ul>
               </section>
             </section>
          </transition>
        </div>
        <!-- 排序 -->
        <div class="sort_item" :class="{choose_type:sortBy == 'sort'}">
          <div class="sort_item_container" @click="chooseType('sort')">
            <div class="sort_item_border">
              <span :class="{category_title: sortBy == 'sort'}">综合排序</span>
              <svg width="10" height="10" xmlns="http://www.w3.org/2000/svg" version="1.1" class="sort_icon">
                <polygon points="0,3 10,3 5,8"/>
              </svg>
            </div>
          </div>
          <transition name="showlist">
            <section v-show="sortBy == 'sort'" class="sort_detail_type">
              <ul class="sort_list_container" @click="sortList($event)">
                <li class="sort_list_li">
                  <p data="2" :class="{sort_select: sortByType == 2}">
                    <span>推荐排序</span>
                    <svg v-if="sortByType == 2">
                      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#selected"></use>
                    </svg>
                  </p>
                </li>
                <li class="sort_list_li">
                  <p data="5" :class="{sort_select: sortByType == 5}">
                    <span>价格最高</span>
                    <svg v-if="sortByType == 5">
                      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#selected"></use>
                    </svg>
                  </p>
                </li>
                <li class="sort_list_li">
                  <p data="6" :class="{sort_select: sortByType == 6}">
                    <span>价格最低</span>
                    <svg v-if="sortByType == 6">
                      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#selected"></use>
                    </svg>
                  </p>
                </li>
                <li class="sort_list_li">
                  <p data="1" :class="{sort_select: sortByType == 1}">
                    <span>时间最新</span>
                    <svg v-if="sortByType == 1">
                      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#selected"></use>
                    </svg>
                  </p>
                </li>
              </ul>
            </section>
          </transition>
        </div>
        <!-- 筛选-->
        <div class="sort_item" :class="{choose_type:sortBy == 'activity'}">
          <div class="sort_item_container" @click="chooseType('activity')">
            <span :class="{category_title: sortBy == 'activity'}">筛选</span>
            <svg width="10" height="10" xmlns="http://www.w3.org/2000/svg" version="1.1" class="sort_icon">
              <polygon points="0,3 10,3 5,8"/>
            </svg>
          </div>
          <transition name="showlist">
            <section v-show="sortBy == 'activity'" class="sort_detail_type filter_container">
              <section style="width: 100%;">
                <header class="filter_header_style">车源</header>
                <ul class="filter_ul">
                  <li v-for="(item, index) in models" :key="index" class="filter_li" v-bind:class='{actived:index==qwerqwre}' @click="selectDeliveryMode(item.text,item,index)">
                    <span class="">{{item.text}}</span>
                  </li>
                </ul>
              </section>
              <section style="width: 100%;">
                <header class="filter_header_style">海外仓</header>
                <ul class="filter_ul" style="paddingBottom: .5rem;">
                  <li v-for="(item,index) in overseas" :key="index" class="filter_li" v-bind:class='{actived:index==select}'   @click="selectSupportIds(item.name,item,index)">
                    <span class="">{{item.name}}</span>
                  </li>
                </ul>
              </section>
              <footer class="confirm_filter">
                <div class="clear_all filter_button_style" @click="clearSelect">清空</div>
                <div class="confirm_select filter_button_style" @click="confirmSelectFun">确定<span v-show="filterNum">({{filterNum}})</span></div>
              </footer>
            </section>
          </transition>
        </div>
      </section>
      <div class="zlist_Car">
        <section class="car_tag" v-show="this.tagArray.length !=0">
            <div class="left">
              <span v-show="tagArray[0]!=null">{{tagArray[0]}}</span>
              <span v-show="tagArray[1]!=null">{{tagArray[1]}}</span>
              <span v-show="tagArray[2]!=null">{{tagArray[2]}}</span>
              <span v-show="tagArray[3]!=null">{{tagArray[3]}}</span>
            </div>
          <span class="clear" @click="clear()">清空</span>
        </section>
        <listData ref="listDataRef"/>
      </div>

    </div>
    <foot></foot>
  </div>
</template>

<script>
  import headTop from "src/components/header/head"
  import foot from '../../components/footer/footGuide'
  import listData from "./module/listData"

  export default {
    name: "listCar",
    data(){
      return {
        geohash: "", // city页面传递过来的地址geohash
        headTitle: "", // msiet页面头部标题
        brandTitle: "品牌", // 排序左侧头部标题
        sortBy: "", // 筛选的条件
        brand:"",
        closeOff:"",
        subBrandTitle:"",
        qwerqwre:"-1",
        select:"-1",
        tagArray:[],
        brands: [{type:"A",brand:[{"id":"1","imgUrl":"","name":"奥迪",child:[{
          "id":"1","config":"奥迪A8"},{"id":"2","config":"奥迪A7"}]}]},
          {type:"F",brand:[{"id":"2","imgUrl":"","name":"丰田",child:[{
              "id":"1","config":"丰田霸道"},{"id":"2","config":"普拉多"},{"id":"2","config":"酷路泽"}]}]}], // category分类左侧数据
        brandsDetail: null, // category分类右侧的详细数据
        sortByType: null, // 根据何种方式排序
        models: [{text:'中东版'},{text:'北美版'},{text:'澳洲版'}], // 配送方式数据
        overseas: [{name:'澳洲仓'},{name:'北美仓'},{name:'中东仓'}], // 商家支持活动数据
        delivery_mode: null, // 选中的配送方式
        support_ids: [], // 选中的商铺活动列表
        filterNum: 0, // 所选中的所有样式的集合
        confirmStatus: false // 确认选择
      }
    },
    components: {
      headTop,
      listData,
      foot
    },
    methods:{
      async chooseType(type){
        if (this.sortBy !== type) {
          this.sortBy = type;
          //food选项中头部标题发生改变，需要特殊处理
          if (type == "brand") {
            this.foodTitle = "品牌";
          } else {
            //将foodTitle 和 headTitle 进行同步
            this.foodTitle = this.headTitle;
          }
        } else {
          //再次点击相同选项时收回列表
          this.sortBy = "";
          if (type == "brand") {
            //将foodTitle 和 headTitle 进行同步
            this.foodTitle = this.headTitle;
          }
        }
      },
      selectCategoryName(name,obj, index) {
        //第一个选项 -- 全部商家 因为没有自己的列表，所以点击则默认获取选所有数据
        this.subBrandTitle = name;
        this.brandsDetail = obj;
        this.closeOff = "true";

      },
      close:function(){
        this.closeOff = ''
      },
      clear(){
        this.tagArray=[];
        this.brandTitle='品牌';
        this.$refs.listDataRef.getListData("",'',0,10);
      },

      selectDeliveryMode(text,item,index){
          this.qwerqwre=index;
          this.tagArray[2]=text;

      },
      selectSupportIds(text,item,index){
        this.select=index;
        this.tagArray[3] = text;
      },
      getCategoryIds(name,index,id) {
        //第一个选项 -- 全部商家 因为没有自己的列表，所以点击则默认获取选所有数据
       // this.restaurant_category_ids = id;
        this.brandTitle=name;
        this.sortBy="";
        this.tagArray[0]=name;
        this.$refs.listDataRef.getListData("search_conf",name,0,10);
      },
      //点击某个排序方式，获取事件对象的data值，并根据获取的值重新获取数据渲染
      sortList(event) {
        let node;
        // 如果点击的是 span 中的文字，则需要获取到 span 的父标签 p
        if (event.target.nodeName.toUpperCase() !== "P") {
          node = event.target.parentNode;
        } else {
          node = event.target;
        }
        alert(node.getAttribute("data"))
        this.sortByType = node.getAttribute("data");
        this.sortBy = "";
      },
      //只有点击清空按钮才清空数据，否则一直保持原有状态
      clearSelect() {
        this.support_ids.map(item => (item.status = false));
        this.filterNum = 0;
        this.delivery_mode = null;
      },
      //点击确认时，将需要筛选的id值传递给子组件，并且收回列表
      confirmSelectFun() {
        //状态改变时，因为子组件进行了监听，会重新获取数据进行筛选
        this.confirmStatus = !this.confirmStatus;
        this.sortBy = "";
      }
    }
  }
</script>

<style lang="scss"  scoped>
  @import "../../style/common";
  @import "../../style/mixin";
  /* 汽车列表 */
  .zbox {
    max-width: 7.5rem;
    margin: auto;
  }
  .zlist_Car{
    margin-top: 1.8rem;
    .car_tag{
      display: inline-block;
      width: 100%;
      padding: 0 0.2rem;
      @include wh(100%,0.6rem);
      position: relative;
      line-height: 0.6rem;
      .left{
        margin-right: 1.2rem;
        display: inline-block;
        padding: 0.05rem;
      }
      span{
        border: 1px solid #eee;
        padding:  0.05rem 0.16rem;
        padding-right: 0.34rem;
        background: #fff url('../../images/wrong.png') no-repeat right center;
        background-size: 0.24rem;
        margin-right:0.1rem;
        float: left;
        line-height: 0.34rem;
        margin-bottom: 0.02rem;
      }
      .clear{
        position: absolute;
        right: 0.2rem;
        line-height: 0.3rem;
        top: 0.1rem;
        background:  url('../../images/del.png') no-repeat left center;
        background-size: 0.30rem;
        padding-left: 0.4rem;
        padding-right: 0;
        border: none;
      }
    }
  }
  .sort_container {
    background-color: #fff;
    border-top: 0.025rem solid #f1f1f1;
    border-bottom: 0.025rem solid #f1f1f1;
    position: fixed;
    top: 1.05rem;
    right: 0;
    width: 100%;
    display: flex;
    z-index: 13;
    box-sizing: border-box;
    .sort_item {
      @include sc(0.24rem, #444);
      @include wh(33.3%,0.7rem);
      text-align: center;
      line-height: 0.7rem;
      .sort_item_container {
        @include wh(100%, 100%);
        position: relative;
        z-index: 14;
        background-color: #fff;
        box-sizing: border-box;
        .sort_item_border {
          height: 0.7rem;
        }
      }
      .sort_icon {
        vertical-align: middle;
        transition: all 0.3s;
        fill: #666;
      }
    }
    .choose_type {
      .sort_item_container {
        .category_title {
          color: $blue;
        }
        .sort_icon {
          transform: rotate(180deg);
          fill: $blue;
        }
      }
    }
    .showlist-enter-active,
    .showlist-leave-active {
      transition: all 0.3s;
      transform: translateY(0);
    }
    .showlist-enter,
    .showlist-leave-active {
      opacity: 0;
      transform: translateY(-100%);
    }
    .sort_detail_type {
      width: 100%;
      position: absolute;
      top: 0.7rem;
      left: 0;
      border-top: 0.025rem solid $bc1;
      background-color: #fff;
    }
    .category_container {
      .category_left {
        width: 100%;
        background-color: #fff;
        height: 16rem;
        overflow-y: auto;
        span {
          @include sc(0.24rem, #666);
          line-height: 0.7rem;
          padding: 0 0.2rem;
        }
        .category_left_li {
          border-bottom: 1px solid #f1f1f1;
          text-align: left;
          .type{
            width: 100%;
            display: inline-block;
            background: #f1f1f1;
          }
          .fast{
            width: 100%;
            display: inline-block;
            padding: 0 0.2rem;
          }
          .fastSelect{
            width: 100%;
            padding: 0 0.2rem;
            ul{
              display: inline-block;
              width: 100%;
              li{
                float: left;
                width: 25%;
                text-align: center;
                img{
                  width: 80%;
                  height: auto;
                  margin: 0;
                }
              }
            }

          }
          .category_icon {
            @include wh(0.8rem, 0.8rem);
            vertical-align: middle;
            margin-left: 0.2rem;
          }
          .category_arrow{
            @include wh(0.3rem, 0.3rem);
            vertical-align: middle;
            margin-right: 0.2rem;
          }
          .category_count {
            background-color: #ccc;
            @include sc(0.4rem, #fff);
            padding: 0 0.1rem;
            border: 0.025rem solid #ccc;
            border-radius: 0.8rem;
            vertical-align: middle;
            margin-right: 0.25rem;
          }
          .category_arrow {
            vertical-align: middle;
          }
        }
        .category_active {
          background-color: #fff;
        }
      }
      .category_right {
        background: rgba(0,0,0,0.5);
        height: 16rem;
        overflow-y: auto;
        position: absolute;
        right: 0;
        width: 100%;
        z-index: 1000;
        top: 0;
        .off{
          width: 0.25rem;
          font-size: 0.24rem;
          color: #fff;
          line-height: 0.40rem;
          position: absolute;
          left: 10%;
          top:20%;
        }
        .select{
          background: #fff;
          width: 70%;
          float: right;
          height: 100%;
          overflow-y: auto;
        }
        .category_right_li {
          height: 0.72rem;
          line-height: 0.72rem;
          border-bottom: 0.025rem solid $bc;
          width: 100%;
          span.title{
            background: #f1f1f1;
            width: 100%;
            text-align: left;
            margin-left: 0;
            padding-left: 0.2rem;
          }
          img{
            @include wh(0.7rem, 0.7rem);
            vertical-align: middle;
            float: left;
            margin-right: 0.2rem;
            margin-left: 0.2rem;
          }
          span {
            color: #666;
            float: left;
            margin-left: 0.2rem;
          }
        }
        .category_right_choosed {
          span {
            color: $blue;
          }
        }
      }
    }
    .sort_list_container {
      width: 100%;
      .sort_list_li {
        height: 0.8rem;
        display: flex;
        align-items: center;
        svg {
          @include wh(0.3rem, 0.3rem);
          margin: 0 0.3rem 0 0.8rem;
        }
        p {
          line-height: 0.7rem;
          flex: auto;
          text-align: left;
          text-indent: 0.25rem;
          border-bottom: 0.025rem solid $bc;
          @include fj;
          align-items: center;
          margin: 0 0.1rem;
          span {
            color: #666;
          }
        }
        .sort_select {
          span {
            color: $blue;
          }
        }
      }
    }
    .filter_container {
      flex-direction: column;
      align-items: flex-start;
      min-height: 10.6rem;
      background-color: #f1f1f1;
      .filter_header_style {
        @include sc(0.24rem, #333);
        line-height: 0.5rem;
        height: 0.5rem;
        text-align: left;
        padding-left: 0.5rem;
        background-color: #fff;
      }
      .filter_ul {
        display: flex;
        flex-wrap: wrap;
        padding: 0 0.5rem;
        background-color: #fff;
        .filter_li{
          display: flex;
          text-align: center;
          align-items: center;
          border: 0.025rem solid #eee;
          @include wh(auto, 0.5rem);
          margin-right: 0.25rem;
          border-radius: 0.125rem;
          padding: 0 0.25rem;
          margin-bottom: 0.25rem;
          svg {
            @include wh(0.8rem, 0.8rem);
            margin-right: 0.125rem;
          }
          span {
            @include sc(0.24rem, #333);
            line-height: 0.4rem;
            width: 100%;
            display: inline-block;
          }
          .filter_icon {
            @include wh(0.8rem, 0.8rem);
            font-size: 0.5rem;
            border: 0.025rem solid $bc;
            border-radius: 0.15rem;
            margin-right: 0.25rem;
            line-height: 0.8rem;
            text-align: center;
          }
          .activity_svg {
            margin-right: 0.25rem;
          }
          .selected_filter {
            color: $blue;
          }
        }
        .actived{
          background: $blue;
          span {
            @include sc(0.24rem, #fff);
          }
        }
      }
      .confirm_filter {
        display: flex;
        background-color: #f1f1f1;
        width: 100%;
        padding: 0.1rem 0.15rem;
        .filter_button_style {
          @include wh(50%, 0.7rem);
          font-size: 0.24rem;
          line-height: 0.7rem;
          border-radius: 0.2rem;
        }
        .clear_all {
          background-color: #fff;
          margin-right: 0.5rem;
          border: 0.025rem solid #fff;
        }
        .confirm_select {
          background-color: #56d176;
          color: #fff;
          border: 0.025rem solid #56d176;
          span {
            color: #fff;
          }
        }
      }
    }
  }
  .showcover-enter-active,
  .showcover-leave-active {
    transition: opacity 0.3s;
  }
  .showcover-enter,
  .showcover-leave-active {
    opacity: 0;
  }
  .back_cover {
    position: fixed;
    @include wh(100%, 100%);
    z-index: 10;
    background-color: rgba(0, 0, 0, 0.3);
  }
</style>
